
<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">资源管理</span>
        </div>
        <div class="header-right-wraper">
          <Input
            v-model="name"
            placeholder="按资源名称搜索"
            style="width: 200px"
            class="headerMar"
          />
          <Button
            type="primary"
            @click="queryResource()"
            class="system-btn-style headerMar"
            style="margin-right: 10px"
          >
            <Icon type="ios-search" />&nbsp;查询
          </Button>
          <Button
            type="warning"
            @click="addServe"
            class="system-btn-style headerMar"
          >
            <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;添加
          </Button>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
            <template v-slot:type="item">
              {{ item.data.row.clusterResourceType.type }}
            </template>
            <template v-slot:show_details="item">
              <CButton
                title="编辑"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="changeServe(item.data.row)"
                >修改</CButton
              >
              <CButton
                title="编辑"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="delectRow(item.data.row)"
                >删除</CButton
              >
            </template>
          </TableList>
        </div>
      </CCardBody>
    </CCard>

    <!-- 删除资源信息 -->
    <Modal
      v-model="delResourceShow"
      draggable
      scrollable
      title="节点组信息"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除资源</span>
      </p>
      <div class="delKuangBody">
        <p>删除该资源时与该资源相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton
          @click="delResourceShow = false"
          color="info"
          class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!--创建接点-->
    <Modal v-model="checkTask" draggable scrollable :width="600">
      <p slot="header" class="modalHeader">
        <!-- <img src="@/assets/icons/search.png" alt />-->
        <span style="margin-left: 5px">{{
          formItem.id ? "修改资源信息" : "创建资源"
        }}</span>
      </p>
      <div class="delKuangBody">
        <Form
          ref="form"
          :model="formItem"
          :label-width="80"
          :rules="formItemRule"
        >
          <FormItem label="资源名称" prop="resourceName">
            <Input
              v-model="formItem.resourceName"
              placeholder="请输入资源名称"
            ></Input>
          </FormItem>
          <FormItem label="资源别名" prop="resourceAlias">
            <Input
              v-model="formItem.resourceAlias"
              placeholder="请输入资源别名"
            ></Input>
          </FormItem>
          <FormItem label="资源类型" prop="clusterResourceType.id">
            <Select v-model="formItem.clusterResourceType.id">
              <template v-for="item in selcetData.type">
                <Option :value="item.id" :key="item.id">{{ item.type }}</Option>
              </template>
            </Select>
          </FormItem>
          <FormItem label="命名空间" prop="namespace">
            <Input
              v-model="formItem.namespace"
              placeholder="请输入命名空间"
            ></Input>
          </FormItem>
        </Form>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="handleReset" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="checkTaskOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/template/table/TableList";

export default {
  name: "resourceManage",
  components: { TableList },
  data() {
    return {
      formItemRule: {
        resourceName: {
          required: true,
          message: "请输入资源名称",
          trigger: "blur",
        },
        resourceAlias: {
          required: true,
          message: "请输入资源别名",
          trigger: "blur",
        },
        namespace: {
          required: true,
          message: "请输入命名空间",
          trigger: "blur",
        },
        "clusterResourceType.id": {
          type: 'number',
           required: true,
          message: "请输入资源类型",
          trigger: "blur",
        },
      },
      modalStyle: { top: "200px" },
      name: "",
      clickId: "",
      delResourceShow: false, //删除资源

      currentPage: "",
      pageSize: "",
      getColumns: [
        {
          title: "资源名称",
          key: "resourceName",
          className: "centerText",
          align: "center",
        },
        {
          title: "资源别名",
          key: "resourceAlias",
          className: "centerText",
          align: "center",
        },
        {
          title: "资源类型",
          key: "type",
          className: "centerText",
          align: "center",
          slot: "type",
        },
        {
          title: "命名空间",
          key: "namespace",
          className: "centerText",
          align: "center",
        },
        {
          title: "创建时间",
          key: "createTime",
          className: "centerText",
          width: "220",
          align: "center",
        },
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          align: "center",
          width: "180",
        },
      ],
      getAxios: {
        url: this.$api.monitorApi.getResourceDataList, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },

      checkTask: false,
      //创建 / 修改   记录数据
      formItem: {
        resourceName: "",
        resourceAlias: "",
        clusterResourceType: { id: "" },
        namespace: "",
      },
      selcetData: {
        type: "", //资源类型
      },
    };
  },
  mounted() {
    this.getServeType();
  },
  methods: {
    getServeType() {
      let that = this;
      // 资源类型
      this.http.get(this.$api.monitorApi.resourceType).then((res) => {
        if (res.data.success) {
          that.selcetData.type = res.data.data;
        }
      });
    },
    //查询节点
    queryResource() {
      let path = this.$api.monitorApi.getResourceDataList;
      let params = {
        name: this.name,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      this.http.get(path, params).then((res) => {
        if (res.data.code == 0) {
          this.$Message.success(res.data.message);
          this.$refs.table.getRefreshTable(params);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    //删除资源
    delectRow(data) {
      this.delResourceShow = true;
      this.clickId = data.id;
    },
    delOk() {
      this.delResourceShow = false;
      let path = this.$api.monitorApi.delResource + this.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.code == 0) {
          //说明有要删除的数据
          this.$Message.success("删除成功!");
          this.$refs.table.getRefreshTable();
        } else {
          this.$Message.error("删除失败!");
        }
      });
    },
    //查询
    searchList() {
      this.$refs.table.getRefreshTable({ name: this.name });
    },
    //添加
    addServe() {
      this.checkTask = true;
      this.clearForm();
    },
    changeServe(data) {
      this.checkTask = true;
      let newForm = JSON.parse(JSON.stringify(data));
      this.formItem = newForm;
    },

    //清空数据
    clearForm() {
      this.formItem = {
        resourceName: "",
        resourceAlias: "",
        clusterResourceType: { id: "" },
        namespace: "",
      };
    },
    checkTaskOk() {
      let that = this;
      this.$refs.form.validate((valid) => {
        let params = JSON.parse(JSON.stringify(that.formItem));
        if (valid) {
          that.http[params.id ? "put" : "post"](
            params.id
              ? this.$api.monitorApi.updateResource + params.id
              : this.$api.monitorApi.createResource,
            params
          ).then((res) => {
            if (res.data.success) {
              params.id
                ? that.$Message.success("更新成功!")
                : that.$Message.success("创建成功!");
              that.checkTask = false;
              that.clearForm();
              that.$refs.table.getRefreshTable();
            } else {
              that.$Message.info(res.data.message);
            }
          });
        } else {
          this.$Message.error("请完成表单！");
        }
      });
    },
    handleReset() {
      this.checkTask = false;
      this.clearForm();
    },
  },
};
</script>

<style scoped>
.rightCard {
  width: 80%;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}
.headerMar {
  margin-left: 10px;
}
.delKuangBody {
  margin-left: 39px;
  line-height: 2;
}
</style>
